import React, { useState, useEffect } from "react";
import Loadable from "react-loadable";
import { LoadingComponent } from "../../components/LoadingComponent";
import { NavLink, Route, Switch } from "react-router-dom";
import { routerMaps } from "../../router/dappRouter";
import IndexOverview from "./indexOverview";
import zhishugailanIcon from "../../assets/images/dapp/zhishugailan.svg";
import zhishugailanActiveIcon from "../../assets/images/dapp/zhishugailan_active.svg";
import kaishijiaoyiIcon from "../../assets/images/dapp/kaishijiaoyi.svg";
import kaishijiaoyiActiveIcon from "../../assets/images/dapp/kaishijiaoyi_active.svg";
import zhiyawakuangIcon from "../../assets/images/dapp/zhiyawakuang.svg";
import zhiyawakuangActiveIcon from "../../assets/images/dapp/zhiyawakuang_active.svg";
import eswapIcon from "../../assets/images/dapp/eswap.svg";
import eswapActiveIcon from "../../assets/images/dapp/eswap_active.svg";
import qianbaozichanIcon from "../../assets/images/dapp/qianbaozichan.svg";
import qianbaozichanActiveIcon from "../../assets/images/dapp/qianbaozichan_active.svg";
import zhishutiaokongIcon from "../../assets/images/dapp/zhishutiaokong.svg";
import zhishutiaokongActiveIcon from "../../assets/images/dapp/zhishutiaokong_active.svg";
import { useHistory, useLocation } from "react-router-dom";
import { useTranslation } from "react-i18next";
import facebookIcon from "../../assets/images/dapp/facebook.svg";
import emailIcon  from "../../assets/images/dapp/email.svg";
import chatIcon from "../../assets/images/dapp/chat.svg";
import siderLogoIcon from '../../assets/images/dapp/siderLogo.svg'


function Dapp() {
  const [routers, setRouters] = useState(null);
  const [activeMenu, setActiveMenu] = useState(1);
  const [deviceType, setDeviceType] = useState(
    sessionStorage.getItem("deviceType")
  );
  let history = useHistory();
  const { t, i18n } = useTranslation();
  let location = useLocation();

  useEffect(() => {
    setRouters(dynamicRouter());
  }, []);


  useEffect(() => {
    if(location.pathname == '/dapp/indexOverview') {
      setActiveMenu(1)
    } else if(location.pathname == '/dapp/deal') {
      setActiveMenu(2)
    } else if(location.pathname == '/dapp/indexRegulation') {
      setActiveMenu(6)
    } 
  }, [location])
  //初始化路由
  function dynamicRouter() {
    const dynamicImport = (component) =>
      Loadable({
        loader: () => import("." + component),
        loading: LoadingComponent,
      });

    //循环子router
    const getRouters = (subRouters = [], routers = []) => {
      subRouters.map((child) => {
        child.component &&
          routers.push(
            <Route
              key={child.path}
              path={child.path}
              component={dynamicImport(child.component)}
            />
          );
        if (child.children) {
          getRouters(child.children, routers);
        }
      });

      return routers;
    };

    let routerList = getRouters(routerMaps);
    const defaultRoute = [];

    return defaultRoute.concat(routerList);
  }
  const getItem = (label, key, icon, children, type) => {
    return {
      key,
      icon,
      children,
      label,
      type,
    };
  };
  const items = [
    getItem("指数概览", "1"),
    getItem("开始交易", "2"),
    getItem("质押挖矿", "3"),
    getItem("ESwap", "4"),
    getItem("钱包资产", "5"),
    getItem("指数调控", "6"),
  ];

  const handleChangeMenu = (val) => {
    setActiveMenu(val);

    switch (val) {
      case 1:
        history.push("/dapp/indexOverview");
        break;
      case 2:
        history.push("/dapp/deal");
        break;
      case 3:
        break;
      case 4:
        break;
      case 5:
        break;
      case 6:
        history.push("/dapp/indexRegulation");
        break;
    }
  };

  return (
    <div className="dapp-container">
      {deviceType == "PC" ? (
        <div className="sider">
          <div className="header-logo"> 
            <img className="logo-img" src={siderLogoIcon}></img>
          </div>
          <div className="menu-group">
            <div
              className={activeMenu == 1 ? "active-menu" : "normal-menu"}
              onClick={() => handleChangeMenu(1)}
            >
              <div className="icon-box">
                <img   className="nav-icon-active" src={zhishugailanActiveIcon} style={{width: 11, height:16, position:'relative', top: -2}}></img>
                <img className="nav-icon" src={zhishugailanIcon}  style={{width: 11, height:16, position:'relative', top: -2}}></img>
              </div>
              <div className="name-box">
                <NavLink to="/dapp/indexOverview">
                  <span className="nav-text">{t("dapp.indexOverview")}</span>
                </NavLink>
              </div>
            </div>
            <div
              className={activeMenu == 2 ? "active-menu" : "normal-menu"}
              onClick={() => handleChangeMenu(2)}
            >
              <div className="icon-box">
                <img
                  className="nav-icon-active"
                  src={kaishijiaoyiActiveIcon}
                ></img>
                <img className="nav-icon" src={kaishijiaoyiIcon}></img>
              </div>
              <div className="name-box">
                <NavLink to="/dapp/deal">
                  <span className="nav-text">{t("dapp.startTrading")}</span>
                </NavLink>
              </div>
            </div>
            {/* <div
              className={activeMenu == 3 ? "active-menu" : "normal-menu"}
              onClick={() => handleChangeMenu(3)}
            >
              <div className="icon-box">
                <img
                  className="nav-icon-active"
                  src={zhiyawakuangActiveIcon}
                ></img>{" "}
                <img className="nav-icon" src={zhiyawakuangIcon}></img>
              </div>
              <div className="name-box">
                <NavLink to="/dapp/indexOverview">
                  <span className="nav-text">{t("dapp.staking")}</span>
                </NavLink>
              </div>
            </div>
            <div
              className={activeMenu == 4 ? "active-menu" : "normal-menu"}
              onClick={() => handleChangeMenu(4)}
            >
              <div className="icon-box">
                <img className="nav-icon-active" src={eswapActiveIcon}></img>
                <img className="nav-icon" src={eswapIcon}></img>
              </div>
              <div className="name-box">
                <NavLink to="/dapp/indexOverview">
                  <span className="nav-text">{t("dapp.eswap")}</span>
                </NavLink>
              </div>
            </div>
            <div
              className={activeMenu == 5 ? "active-menu" : "normal-menu"}
              onClick={() => handleChangeMenu(5)}
            >
              <div className="icon-box">
                <img
                  className="nav-icon-active"
                  src={qianbaozichanActiveIcon}
                ></img>
                <img className="nav-icon" src={qianbaozichanIcon}></img>
              </div>
              <div className="name-box">
                <NavLink to="/dapp/indexOverview">
                  <span className="nav-text">{t("dapp.walletAssets")}</span>
                </NavLink>
              </div>
            </div> */}
            <div
              className={activeMenu == 6 ? "active-menu" : "normal-menu"}
              onClick={() => handleChangeMenu(6)}
            >
              <div className="icon-box">
                <img
                  className="nav-icon-active"
                  src={zhishutiaokongActiveIcon}
                ></img>
                <img className="nav-icon" src={zhishutiaokongIcon}></img>
              </div>
              <div className="name-box">
                <NavLink to="/dapp/indexRegulation">
                  <span className="nav-text">{t("dapp.indexRegulation")}</span>
                </NavLink>
              </div>
            </div>
          </div>

          <div className="footer-box">
            <div className="icon-group">
                <img className="icon-item" src={facebookIcon}></img>
                <img className="icon-item" src={emailIcon} style={{margin: '0px 24px'}}></img>
                <img className="icon-item" src={chatIcon}></img>


            </div>
            <div className="link-box">
            © 2023 easedex.finance
            </div>
          </div>
        </div>
      ) : null}

      <div className="content">

           {/* <div className="top-notice">
        <span>{t("dappDeal.topNotice")}</span>
      </div> */}
        <Switch>
          {routers}
          <Route path="/dapp/indexOverview" component={IndexOverview} />
          {/* <Route  path="/dapp/indexOverview" component={IndexOverview} /> */}
        </Switch>
      </div>
    </div>
  );
}

export default Dapp;
